"use client";
import { GameInfo } from "@/api/home";
import { useRouter } from "@/i18n/routing";
import { server } from "@/utils/client";
import { useTranslations } from "next-intl";
import Script from "next/script";
import { FC, useEffect, useRef,useState } from "react";

interface Props {
    brand_id: string;
    token: string;
}
//  dedprz | deepwin365 | damslots | chips |   deloro-casino
const SportsClient: FC<Props> = (props) => {
    const t = useTranslations("ProfilePage");
    const { brand_id, token } = props;
    const [currentToken, setCurrentToken] = useState(token);


    const btRef = useRef(null);
    const router = useRouter();


    useEffect(() => {
      console.log("onLoad=====>0000");
      // @ts-ignore
      if (window.BTRenderer) {
        console.log("onLoad=====>1111");
        onLoad();
      }
      
      // 离开体育页的时候需要kill掉
      return () => {
        console.log("onLoad=====>killkillkillkillkill");
          // @ts-ignore
          btRef.current?.kill();
      };
    }, []);

    useEffect(() => {
      console.log("onLoad=====>22222");
      // 如果token更新了才调用update
      if( currentToken !== token){
        console.log("onLoad=====>333333");
        updateToken(token);
      }
    }, [token]);

    const getGameDetailApi = async () => {
        const data = await server
            .request<GameInfo>({
                url: "/v1/api/front/game_info_by_id",
                method: "post",
                data: { id: "sportsBet", mode: 1 },
            })
            .then((res) => {
                if (res.code === 200) {
                  setCurrentToken(res.data.game_url)
                  return res.data.game_url;
                } else {
                  return "";
                }
            });
        return data;
    };

    const updateToken = (newToken: string) => {
      console.log("onLoad=====>44444-0000000");
      // @ts-ignore
        if(currentToken!== newToken){
          console.log("onLoad=====>44444");
          setCurrentToken(newToken);
        }
        // @ts-ignore
        // if (window.BTRenderer) {
        //   onLoad();
        // }

        // 使用 updateOptions 更新当前的 BTRenderer 参数，而不是重新初始化
      if (btRef.current) {
        console.log("onLoad=====>55555");
        // 更新 token 和其他配置
        // @ts-ignore
        btRef.current.updateOptions({
          token: newToken, // 更新 token
          url: '/', // 更新 URL 或其他参数
          betSlipOffsetBottom: 80,
          betSlipZIndex: 1000,
          stickyTop: 0,
          betSlipOffsetTop: 50,
        });
      }
    }

    const onLoad = () => {
        // @ts-ignore
        const bt = new BTRenderer();
        btRef.current = bt;
        console.log("onLoad=====>666666",token);
        bt.initialize({
            brand_id: brand_id,
            token: token,//使用最新的token
            onTokenExpired: getGameDetailApi, //过期自动更新token
            onSessionRefresh: () => {
              // 销毁之前的实例并等待刷新完成
              if(btRef.current){
                // @ts-ignore
                btRef.current?.kill();
              }
              
              router.refresh()
            },
            themeName: "default",
            lang: "pt-br",
            target: document.getElementById("betby"),
            betSlipOffsetBottom: 80,
            // betSlipOffsetRight: 750,

            betSlipZIndex: 1000,
            stickyTop: 0,
            betSlipOffsetTop: 50,
            onRecharge: function () {
                router.push("/deposit");
            },
            onRouteChange: function () {
            },
            onLogin: function () {},
            onRegister: function () {},
            onBetSlipStateChange: function () {},
        });
    };

    return (
        <>    
          <div id="betby" className={"h-[100%]"}></div>

          <Script src={"https://ui.invisiblesport.com/bt-renderer.min.js"} onLoad={onLoad} />
        </>
    );
};

export default SportsClient;